<template>
  <div>
    <Content
      @InputFn="InputFn"
      @QueryFn="QueryFn"
      @OpenDiaFn="OpenDiaFn"
      @OneBtn="OneBtn"
      @TwoBtn="TwoBtn"
      @CheckDetailsFn="CheckDetailsFn"
      @headerStyleEvent="headerStyleEvent"
    />
    <ADDdialog :title="name" :OnepartnerDialog="OnepartnerDialog" @CloseDia="CloseDia" @OpenDia="OpenDia">
      <template #Onepartner>
        <el-form :model="PartnerData"
            ref="departRef"
            label-width="120px"
            :rules="departRules"
            size="small">
          <el-form-item label="合作商名称：" prop="name" >
            <el-input placeholder="请输入" v-model.trim="PartnerData.name" :show-word-limit="true" type="text"/>
          </el-form-item>
          <el-form-item label="联系人：" prop="contact">
            <el-input placeholder="请输入" v-model.trim="PartnerData.contact"/>
          </el-form-item>
          <el-form-item label="联系电话：" prop="mobile">
            <el-input placeholder="请输入" v-model.trim="PartnerData.mobile" />
          </el-form-item>
          <el-form-item label="分成比例(%): " prop="ratio">
            <el-input-number v-model.trim="PartnerData.ratio" controls-position="right" placeholder="请输入"
             :min="1" :max="100" style="width: 100%;"/>
          </el-form-item>
          <div v-if="!show">
          <el-form-item label="账号：" prop="account" >
            <el-input placeholder="请输入" v-model.trim="PartnerData.account"/>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input placeholder="请输入" v-model.trim="PartnerData.password"/>
          </el-form-item>
        </div>
        </el-form>
      </template>
    </ADDdialog>
    <ADDdialog title="合作商详情" :TwopartnerDialog="TwopartnerDialog" @CloseDia="CloseDia" @OpenDia="OpenDia">
      <template #Twopartner v-if="PartnerMore">
        <el-form :model="PartnerMore" label-width="100px" style="height: 100px;">
          <el-row style="line-height: 20px;">
            <el-col :span="12" >
            <el-form-item label="合作商名称：" prop="taskCode" >
              {{PartnerMore.taskCode}}
            </el-form-item>
            </el-col>
            <el-col :span="12" >
            <el-form-item label="联系人：" prop="taskStatusTypeEntity" >
              {{PartnerMore.taskStatusTypeEntity.statusName || ''}}
            </el-form-item>
            </el-col>
            <el-col :span="12" >
            <el-form-item label="联系电话：" prop="innerCode" >
              {{PartnerMore.innerCode}}
            </el-form-item>
            </el-col>
            <el-col :span="12" >
            <el-form-item label="分成比例：" prop="taskType" >
              {{PartnerMore.taskType.typeName || ''}}%
            </el-form-item>
            </el-col>
          </el-row>
          </el-form>
      </template>
    </ADDdialog>
  </div>
</template>

<script>
import { PartnerSearchRequest, AddPartnerRequest, ResetPasswordRequest, ModifyPartnerRequest } from '@/api'
import { createNamespacedHelpers } from 'vuex'
const { mapMutations, mapState } = createNamespacedHelpers('publics')
export default {
  data () {
    return {
      name: '新增合作商',
      OnepartnerDialog: false,
      TwopartnerDialog: false,
      ThreepartnerDialog: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        name: null
      },
      PartnerData: {
        name: '',
        account: '',
        password: null,
        ratio: null,
        contact: '',
        mobile: null
      },
      show: false,
      PartnerMore: '',
      departRules: {
        name: [
          { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '1 - 10个字符', trigger: ['blur', 'change'] }
        ],
        account: [
          { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
          { min: 1, max: 18, message: '1 - 18个字符', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
          { min: 1, max: 20, message: '1 - 20个字符', trigger: ['blur', 'change'] }
        ],
        ratio: [
          { required: true, message: '此为必填项', trigger: ['blur', 'change'] }
        ],
        contact: [
          { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '1 - 15个字符', trigger: ['blur', 'change'] }
        ],
        mobile: [
          { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  async created () {
    this.nodelist()
  },
  methods: {
    ...mapMutations(['MaOrder', 'MaAddnum', 'MaAeenum', 'MaNum']),
    // 表格头回调函数
    headerStyleEvent () {
      return 'background-color:#f3f6fb'
    },
    async nodelist () {
      const res = await PartnerSearchRequest(this.page)
      console.log(res)
      console.log(res.data.currentPageRecords)
      const dataNew = []
      res.data.currentPageRecords.map(item => {
        const obj = {
          taskCode: item.name,
          innerCode: item.account,
          taskType: { typeName: item.vmCount },
          taskStatusTypeEntity: { statusName: item.contact },
          userName: item.mobile,
          createType: `${item.ratio}%`,
          id: item.id
        }
        dataNew.push(obj)
      })
      // 转换数据
      this.MaOrder({
        currentPageRecords: dataNew,
        totalCount: res.data.totalCount,
        totalPage: res.data.totalPage
      }
      )
    },
    async CheckDetailsFn (item, num) {
      if (num === '4') {
        this.$confirm('你确定要重置合作商家密码吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await ResetPasswordRequest(item.id)
            this.$message.success('重置成功')
          } catch (err) {
            this.$message.warning('重置失败')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
      if (num === '1') {
        this.PartnerMore = item
        this.TwopartnerDialog = true
      }
      if (num === '2') {
        this.name = '修改合作商'
        this.page.name = item.taskCode
        const res = await PartnerSearchRequest(this.page)
        this.PartnerData = res.data.currentPageRecords[0]
        this.show = true
        this.OnepartnerDialog = true
      }
    },
    OneBtn () {

    },
    TwoBtn () {

    },
    async OpenDia () {
      this.$refs.departRef.validate(async (vali) => {
        if (vali) {
          if (this.name === '新增合作商') {
            try {
              await AddPartnerRequest(this.PartnerData)
              this.$message.success('新增成功')
              this.CloseDia()
              this.nodelist()
            } catch (err) {
              this.$message.warning('新增失败')
            }
          } else {
            try {
              await ModifyPartnerRequest(this.PartnerData)
              this.page.name = null
              this.$message.success('新增成功')
              this.CloseDia()
              this.nodelist()
            } catch (err) {
              this.$message.warning('新增失败')
            }
          }
        }
      })
    },
    OpenDiaFn () {
      this.OnepartnerDialog = true
    },
    CloseDia () {
      this.name = '新增合作商'
      this.show = false
      this.OnepartnerDialog = false
      this.TwopartnerDialog = false
      // this.$refs.departRef.resetFields()
    },
    QueryFn (item) {
      this.page.name = this.PropsData.Order.taskCode
      this.nodelist()
    },
    InputFn () {

    }
  },
  computed: {
    ...mapState(['PropsData'])
  }
}
</script>

<style></style>
